<template>
    <!--实时巡更-->
    <div class="realtime_inspection">
        <div class="inspection">
            <div></div>
            <div>
                <div>
                    <span></span>
                    <span>填写实时巡检位置名称</span>
                </div>
                <div class="box">
                    <div v-for="(item,index) in formList" :key="index">
                        <div>{{ item.label }}</div>
                        <div>
                            <el-input v-model="formList[index].value" placeholder="测试位置"/>
                        </div>
                    </div>
                </div>
                <div class="pointaddicon" @click="pointAdd">
                    <div></div>
                    <div class="addpoint">
                        <span></span>
                        <span>添加点位</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footbuttom">
            <div>
                <el-button @click="pointCancel">取消</el-button>
            </div>
            <div>
                <el-button type="primary">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref, reactive,nextTick} from 'vue';
const formList = ref(
    [
        {label: '起点：', value: ''},
        {label: '点位1：', value: ''},
        {label: '点位2：', value: ''},
    ]
)
//添加点位
const pointAdd = () => {
    let additem={
        label:'点位'+formList.value.length+'：',
        value:''
    }
    formList.value.push(additem)
    nextTick(() => {
        const div = document.getElementsByClassName('box')[0];
        div.scrollTop = div.scrollHeight;
    })

}
const emit = defineEmits<{
    (e: 'hiden', data: boolean): void;
}>();

const pointCancel=()=>{
    emit('hiden', false);
}
</script>

<style scoped lang="scss">
.realtime_inspection {
    padding: 27px 32px;
}

.inspection {
    display: flex;
    justify-content: space-between;

    > div {
        &:nth-of-type(1) {
            width: 55%;
            height: 230px;
            margin-right: 22px;
            background: url("@/assets/image/inspectionback.png") no-repeat;
            background-size: 100% 100%;
        }

        &:nth-of-type(2) {
            width: calc(45% - 22px);
            overflow: hidden;

            > div {
                &:nth-of-type(1) {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding-left: 18px;

                    span {
                        &:nth-of-type(1) {
                            display: inline-block;
                            width: 4px;
                            height: 16px;
                            background: #1B93FB;
                            margin-right: 10px;
                        }

                        &:nth-of-type(2) {
                            font-size: 18px;
                            color: #0E96FF;
                        }
                    }
                }

                &:nth-of-type(2) {
                    height: 140px;
                    overflow-y: auto;

                    > div {
                        display: flex;
                        align-items: center;
                        padding-right: 20px;

                        > div {
                            margin-bottom: 16px;

                            &:nth-of-type(1) {
                                width: 25%;
                                font-size: 14px;
                                color: #B6B5B5;
                                text-align: right;
                                letter-spacing: 2px;
                            }

                            &:nth-of-type(2) {
                                width: 75%;
                            }
                        }
                    }

                    ::v-deep(.el-input) {
                        font-size: 14px;
                        --el-input-border-color: rgba(255, 255, 255, 0.28);
                        --el-input-text-color: #fff;
                    }

                    ::v-deep(.el-input__wrapper) {
                        background-color: transparent;
                    }
                }

                &:nth-of-type(3) {
                    display: flex;
                    align-items: center;
                    padding-right: 20px;

                    > div {
                        &:nth-of-type(1) {
                            width: 25%;
                        }

                    }

                    .addpoint {
                        width: 75%;
                        height: 29px;
                        border: 1px solid #84B3D8;
                        border-radius: 14px;
                        padding: 0 16px;
                        display: flex;
                        align-items: center;

                        span {
                            &:nth-of-type(1) {
                                display: inline-block;
                                width: 17px;
                                height: 17px;
                                background: url("@/assets/image/addpointicon.png") no-repeat;
                                background-size: 100% 100%;
                                margin-right: 11px;
                            }

                            &:nth-of-type(2) {
                                font-size: 14px;
                                color: #84B3D8;
                            }
                        }
                    }

                }
            }
        }
    }
}

.footbuttom {
    margin: 0 auto;
    width: 25%;
    display: flex;
    justify-content: space-between;
    margin-top: 38px;

    div {

        ::v-deep(.el-button) {
            width: 92px;
            height: 38px;
            border-radius: 4px;
            font-size: 18px;
            border: none;
        }

        &:nth-of-type(1) {
            margin-right: 16px;

            ::v-deep(.el-button) {
                color: #FFFFFF;
                background-color: rgba(255, 255, 255, .1);
            }
        }
    }
}
</style>